<template>
  <div class="home">
    Home
    <div class="children">66666</div>
    <div>pinia store count is {{ count }}</div>
    <el-button type="primary" @click="handleAdd">+</el-button>
    <el-button @click="toDetail">go to Detail page</el-button>
    <icons name="Battery-empty" size="24" ref="batteryIcon" />
  </div>
</template>

<script>
import { mapActions, mapState } from 'pinia'
import { useDefaultStore } from '@/store'

export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(useDefaultStore, ['count'])
  },
  methods: {
    ...mapActions(useDefaultStore, ['setCount']),
    handleAdd() {
      this.setCount(this.count + 1)
    },
    toDetail() {
      this.$router.push({
        path: '/detail'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  font-size: 20px;
  .children {
    color: purple;
  }
}
</style>
